:deep(.el-progress) {
  width: 62px;

  .el-progress-bar {
    height: 100%;

    .el-progress-bar__outer {
      height: 100%;
      padding: 2px;
      background: url('@/assets/images/progress-background.png') no-repeat;
      background-size: 100% 100%;

      .el-progress-bar__inner {
        position: unset;
        height: 20px;

        .el-progress-bar__innerText {
          margin: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

:deep(.el-input-number) {
  .el-input-number__increase,
  .el-input-number__decrease {
    background: transparent;
    color: white;
    border-color: #0069a6;
  }
}

:deep(.el-input) {
  --el-input-border-color: #0069a6;
  --el-input-text-color: white;
  --el-input-icon-color: white;
  --el-input-clear-hover-color: white;

  .el-input__wrapper {
    background: linear-gradient(
      360deg,
      rgba(0, 105, 175, 0.64) 0%,
      rgba(0, 67, 119, 0.01) 100%
    );
  }

  .el-select {
    .el-input__wrapper {
      box-shadow: none;
    }
  }

  &.round {
    --el-input-border-radius: var(--el-border-radius-round);
  }

  .el-icon {
    color: #ffffff;
  }
}

:deep(.el-select) {
  --el-select-input-color: white;

  .el-input {
    --el-input-border-color: #0069a6;

    .el-input__wrapper {
      background: linear-gradient(
        360deg,
        rgba(0, 105, 175, 0.64) 0%,
        rgba(0, 67, 119, 0.01) 100%
      );
    }
  }
  .el-tag {
    background-color: rgba(20, 110, 189, 0.3);
    color: white;
  }

  &.round {
    .el-input {
      --el-input-border-radius: var(--el-border-radius-round);
    }
  }
}

:deep(.el-button) {
  --el-button-bg-color: rgba(38, 104, 216, 0.25);
  --el-button-hover-bg-color: rgba(38, 104, 216, 0.25);
  --el-button-border-color: rgba(8, 164, 240, 0.2);
  --el-button-hover-border-color: rgba(8, 164, 240, 1);
  --el-button-hover-text-color: rgba(8, 164, 240, 1);
  --el-button-text-color: white !important;

  &.is-text:not(.is-disabled).is-has-bg {
    background: rgba(255, 255, 255, 0.1);
  }
  &.is-text:not(.is-disabled):hover,
  &.is-text:not(.is-disabled):focus {
    background: rgba(255, 255, 255, 0.2);
  }

  &.is-link {
    color: white;
  }
}
:deep(.el-form-item__label) {
  color: #ffffff;
}

:deep(.el-date-editor) {
  --el-input-border-color: #0069a6;
  --el-input-text-color: white;
  --el-input-icon-color: white;
  --el-input-clear-hover-color: white;

  &.el-input__wrapper {
    background: linear-gradient(
      360deg,
      rgba(0, 105, 175, 0.64) 0%,
      rgba(0, 67, 119, 0.01) 100%
    );
  }

  .el-range-separator,
  .el-range__icon,
  .el-range-input {
    color: white;
  }

  &.round {
    --el-input-border-radius: var(--el-border-radius-round);
  }
}

:deep(.el-radio-button) {
  .el-radio-button__original-radio:checked + .el-radio-button__inner {
    border-color: rgba(8, 164, 240, 1);
    box-shadow: -1px 0 0 0 rgba(8, 164, 240, 1);
  }

  .el-radio-button__inner {
    --el-button-bg-color: rgba(38, 104, 216, 0.25);
    --el-button-hover-bg-color: rgba(38, 104, 216, 0.25);
    --el-radio-button-checked-bg-color: rgba(38, 104, 216, 0.25);
    --el-button-text-color: white;
    border-color: rgba(8, 164, 240, 0.2);
  }

  &.is-active {
    box-shadow: none;

    .el-radio-button__inner {
      color: rgba(8, 164, 240, 1);
    }
  }
}

:deep(.el-radio) {
  --el-radio-text-color: #ffffff;
  --el-radio-input-border: 1px solid #024977;
  --el-radio-input-width: 16px;
  --el-radio-input-height: 16px;
  --el-radio-input-bg-color: linear-gradient(
    360deg,
    rgba(0, 105, 175, 0.64) 0%,
    rgba(0, 67, 119, 0.01) 100%
  );

  .el-radio__inner {
    background-image: var(--el-radio-input-bg-color);

    &::after {
      width: 6px;
      height: 6px;
      background-color: #0073b6;
    }
  }

  .el-radio__input.is-checked .el-radio__inner {
    border: var(--el-radio-input-border);
    background: var(--el-radio-input-bg-color);
  }
}

:deep(.el-checkbox) {
  --el-checkbox-input-border: 2px solid #ffffff;
  --el-checkbox-checked-input-border-color: #09a4f0;
  --el-checkbox-text-color: #ffffff;
  --el-checkbox-checked-text-color: #09a4f0;
  --el-checkbox-checked-icon-color: #09a4f0;
  --el-checkbox-input-width: 16px;
  --el-checkbox-input-height: 16px;

  .el-checkbox__inner {
    background-color: transparent !important;

    &::before {
      border: 2px solid var(--el-checkbox-checked-icon-color);
      top: 3px;
    }

    &::after {
      border-width: 2px;
      border-color: var(--el-checkbox-checked-icon-color);
    }
  }
}

// v-loading

:deep(.el-loading-mask) {
  --el-mask-color: rgba(1, 9, 34, 0.9);
}

:deep(.el-slider) {
  --el-slider-main-bg-color: rgba(0, 161, 255, 0.3);

  .el-slider__runway {
    background: linear-gradient(
      360deg,
      rgba(0, 105, 175, 0.64) 0%,
      rgba(0, 67, 119, 0.01) 100%
    );
    border: 1px solid rgba(0, 170, 255, 0.7);

    .el-slider__button {
      background: #06314a;
    }
  }
}
:deep(.el-table__row.current-row td) {
  background-color: #25769e !important;
}
:deep(.el-table__row.hover-row td) {
  background-color: #25769e !important;
}
:deep(.el-tree) {
  --el-color-primary-light-9: #25769e;

  .is-current > .el-tree-node__content {
    background-color: var(--el-color-primary-light-9);
  }

  .el-tree-node__content:hover {
    background-color: var(--el-color-primary-light-9);
  }
}
:deep .el-switch .el-switch__core {
  border-radius: 15px;
  background: #002b53;
  border: 1px solid rgba(9, 98, 149, 1);
}

:deep .el-switch.is-checked .el-switch__core {
  border-color: var(
    --el-switch-border-color,
    var(--el-switch-on-color)
  ) !important;
  background-color: var(--el-switch-on-color) !important;
}
